<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <ng-container *ngIf="variant === 'placeholder'">
    <div class="project-item-card placeholder">
      <tg-ui-avatar
        type="light"
        [color]="0"
        [name]="''">
      </tg-ui-avatar>
      <a
        tuiLink
        [routerLink]="['/new-project']"
        [queryParams]="{ workspace: workspace.id }"
        data-test="create-project-card"
        class="project-item-link">
        <ng-container *ngIf="firstProject">
          {{ t('common_project.create_first_project') }}
        </ng-container>
        <ng-container *ngIf="!firstProject">
          {{ t('common_project.create_new_project') }}
        </ng-container>
      </a>
    </div>
  </ng-container>
  <ng-container *ngIf="variant === 'project' && project">
    <div
      class="project-item-card"
      [class.with-actions]="showActions">
      <div class="project-card-title">
        <tg-ui-avatar
          class="project-card-image"
          type="light"
          [color]="project.color"
          [avatarUrl]="project.logoSmall"
          [name]="project.name">
        </tg-ui-avatar>
        <a
          [routerLink]="['/project', project.id, project.slug, 'overview']"
          [state]="{ ignoreNextMainFocus: true }"
          class="project-card-link"
          [class.is-admin]="showActions"
          data-test="project-card-name">
          <h3
            [attr.aria-label]="
              t('common_project.card.a11y.project_name', {
                name: project.name
              })
            ">
            {{ project.name }}
          </h3>
        </a>
        <tui-hosted-dropdown
          *ngIf="showActions"
          class="card-action"
          [tuiDropdownAlign]="'left'"
          [content]="projectActionsDropdown"
          [(open)]="projectActionsDropdownState">
          <button
            [attr.aria-label]="t('common_project.save_template')"
            role="menu"
            aria-haspopup="true"
            [attr.aria-expanded]="projectActionsDropdownState"
            icon="more-horizontal"
            appearance="action-button-2"
            tuiIconButton
            type="button"
            tgUiTooltipPosition="top-right"
            [tgUiTooltip]="t('common_project.project_actions')"></button>
        </tui-hosted-dropdown>
      </div>
      <p
        *ngIf="project.description"
        #projectDescription
        class="project-card-description"
        [tgUiTooltip]="descriptionTooltip"
        [tgUiTooltipDisabled]="!showTooltip"
        tgUiTooltipPosition="bottom-right">
        {{ project.description }}
      </p>
    </div>
  </ng-container>
  <ng-container *ngIf="variant === 'invitation' && project">
    <div
      #invitationCardContainer
      data-animation="card-container">
      <button
        (click)="onRejectInvite()"
        data-test="project-reject-invite"
        class="project-reject-invite"
        tuiIconButton
        [@itemSlideOutAnimation]
        *ngIf="invitationStatus !== 'accepted'"
        appearance="action-button"
        [attr.aria-label]="t('commons.close')"
        [tgUiTooltip]="t('common_project.card.close_card')"
        icon="close"
        type="button"></button>
      <div
        class="project-item-card"
        [@invitationAccepted]="animationAcceptedInvitation">
        <div
          class="card-badge-container"
          [@itemSlideOutAnimation]
          *ngIf="invitationStatus !== 'accepted'">
          <tg-ui-badge
            [label]="t('common_project.card.pending_invitation') | capitalize"
            icon="clock"
            color="gray">
          </tg-ui-badge>
        </div>
        <div class="project-card-title">
          <tg-ui-avatar
            class="project-card-image"
            type="light"
            [color]="project.color"
            [avatarUrl]="project.logoSmall"
            [name]="project.name">
          </tg-ui-avatar>
          <a
            [routerLink]="['/project', project.id, project.slug, 'overview']"
            class="project-card-link"
            data-test="project-card">
            <h3
              [attr.aria-label]="
                t('common_project.card.a11y.project_name', {
                  name: project.name
                })
              ">
              {{ project.name }}
            </h3>
          </a>
        </div>
        <button
          class="project-accept-invite"
          tuiButton
          [@itemSlideOutAnimation]
          data-test="project-accept-invite"
          *ngIf="invitationStatus !== 'accepted'"
          (click)="acceptInvite.next({ id: project.id, name: project.name })"
          appearance="primary"
          type="button">
          {{ t('common_project.card.accept_invite') }}
        </button>
        <p
          class="project-card-description"
          [@itemSlideOutAnimation]
          (@itemSlideOutAnimation.done)="invitationAccepted()"
          #projectDescription
          *ngIf="project.description && invitationStatus === 'accepted'"
          [tgUiTooltip]="descriptionTooltip"
          [tgUiTooltipDisabled]="!showTooltip"
          [tgUiTooltipPosition]="'bottom-right'">
          {{ project.description }}
        </p>
      </div>
    </div>
  </ng-container>
  <ng-template #descriptionTooltip>
    <p
      id="project-description-tooltip"
      aria-hidden="true">
      {{ project!.description }}
    </p>
  </ng-template>

  <ng-template #projectActionsDropdown>
    <tui-data-list class="view-options-list">
      <button
        class="option-btn option-delete"
        tuiOption
        type="button"
        (click)="openModalEvent('deleteModal')">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="trash"></tui-svg>
          <span class="option-name">{{
            t('common_project.delete_project')
          }}</span>
        </div>
      </button>
    </tui-data-list>
  </ng-template>
</ng-container>
